<!-- 签约申请记录 -->
<template>
  <publicPage>
    <view class="tabsFlex1 bgf">
      <u-tabs :list="[{name: '签约医生记录'},{name: '签约团队记录'}]" style="width: 100%" @change="handChange"></u-tabs>
    </view>
    <scroll-view
      v-if="list && list.length"
      scroll-y
      style="height: calc(100% - 44px)"
      @scrolltolower="scrolltolower"
      refresher-enabled
      :refresher-triggered="refresherTriggered"
      @refresherrefresh="refresherrefresh"
    >
      <view
        v-for="(item, index) in list"
        :key="index"
        class="disFlxJS pa-15 borderB forbox"
      >
        <view class="disFlxAC">
          <u-image
            :src="currentTabs === 1 ? item.teamImg : item.headimg"
            mode="aspectFill"
            width="100rpx"
            height="100rpx"
            shape="circle"
          >
          </u-image>
          <view class="pl-15 ov-2" style="width:400rpx;">{{ currentTabs === 1 ? item.teamName : item.userName }}</view>
        </view>
        <view v-if="item.isexpire === '同意'" class="successBtn">
          等待通过
        </view>
        <view v-else class="color9">{{ item.isexpire || "已通过" }} </view>
      </view>
    </scroll-view>

    <view
      class="defaultPage disFlxCC bodyBox"
      style="height: 100%"
      v-if="!list.length && listLoad"
    >
      <view class="fz-18 color8">暂无记录</view>
    </view>
  </publicPage>
</template>

<script>
import orderApi from "@/api/order.js";
export default {
  data() {
    return {
      currentTabs: 0,
      list: [],
      listLoad: false, // 加载是否完成
      getParams: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      refresherTriggered: false,
    };
  },

  onLoad() {
    this.getList();
  },
  methods: {
    async getList() {
      const { data, total } = this.currentTabs === 1 ? await orderApi.getTeamAddList(this.getParams) : await orderApi.addList(this.getParams);
      try {
        this.list =
          this.getParams.pageNum === 1 ? data : [...this.list, ...data];
        this.getParams.total = total;
        this.listLoad = true;
      } catch (error) {
        this.listLoad = true;
      }
    },
    handChange(e) {
      const { index } = e;
      this.currentTabs = index;
      this.refresherTriggered = false;
      Object.assign(this.$data.getParams, this.$options.data().getParams);

      this.list = []; // 解决切换列表闪烁
      this.listLoad = false; // 解决切换列表闪烁
      this.getList();
    },
    // 加载更多
    scrolltolower() {
      if (this.list.length !== this.getParams.total) {
        // u-view内部节流函数
        uni.$u.throttle(() => {
          this.getParams.pageNum++;
          this.getList();
          console.log(this.getParams.pageNum, "滚动加载");
        }, 2000);
      } else {
        console.log("没有更多了");
      }
    },
    async refresherrefresh() {
      this.refresherTriggered = true;
      this.$data.getParams.pageNum = this.$options.data().getParams.pageNum
      this.$data.getParams.total = this.$options.data().getParams.total
      await this.getList();
      console.log(this.getParams.pageNum, "下拉刷新");
      setTimeout(() => {
        this.refresherTriggered = false;
      }, 1000);
    },
  },
};
</script>
<style lang='scss' scoped>
.tabsFlex1{
  box-shadow: 0 0 10rpx #E5E5E5;
  position: sticky;
  top: 0;
  z-index: 2;
}
.successBtn {
  color: #ffffff;
  background-color: #20d19a;
  padding: 8rpx 10rpx;
  border-radius: 10rpx;
  text-align: center;
}
.forbox {
  background-color: #ffffff;
}
</style>